<template>
  <ChartComp :id="id?id:'achievement'"
    :message="achievementMessage" />
</template>

<script>
import { getAchievementConversion } from '@/api/chart.js'
import ChartComp from '@/components/echart/charts.vue'
export default {
  components: {
    ChartComp
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      achievementMessage: {}
    }
  },

  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      getAchievementConversion({ year: this.year }).then(res => {
        let total = 0
        if (res.data && res.data.length > 0) {
          res.data.forEach(item => {
            item.scale = Number(item.scale)
            total += item.value
          })
          let arr = res.data
          this.achievementMessage = {
            legend: {
              top: '3%',
              left: 'center',
              icon: 'rect', // 形状
              itemWidth: 12, // 宽
              itemHeight: 12, // 高
              textStyle: {
                //图例文字的样式
                color: '#ccc',
                fontSize: 16
              }
            },
            tooltip: {
              trigger: 'item',
              axisPointer: {
                type: 'line'
              },
              textStyle: {
                color: '#fff'
              },
              className: 'LineChart-tooltip',
              extraCssText: `background-color: rgba(0, 21, 50, 0.8);
              color: #fff;
              border: 1px solid #214D87;
              border-color: #214D87;
              box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
              border-radius: 4px;`
            },
            graphic: [
              {
                type: 'text',
                left: 'center',
                top: '47%',
                style: {
                  text: total,
                  textAlign: 'center',
                  fill: '#fff',
                  fontSize: 26
                }
              },
              {
                type: 'text',
                left: 'center',
                top: '60%',
                style: {
                  text: '登记成果',
                  textAlign: 'center',
                  fill: '#CCE0F7',
                  fontSize: 18
                }
              }
            ],
            series: [
              {
                name: '成果转化',
                type: 'pie',
                avoidLabelOverlap: true, // 是否启用防止标签重叠策略
                radius: ['45%', '65%'],
                center: ['50%', '55%'],
                data: [
                  {
                    value: arr[1].scale,
                    name: '已转化成果',
                    itemStyle: {
                      //颜色渐变
                      color: new this.$echarts.graphic.LinearGradient(
                        1,
                        1,
                        1,
                        0, //(上-下 渐变)
                        [
                          { offset: 0, color: '#0085FF' },
                          { offset: 1, color: '#9ED0FF' }
                        ]
                      )
                    }
                  },
                  {
                    value: arr[0].scale,
                    name: '未转化成果',
                    itemStyle: {
                      //颜色渐变
                      color: new this.$echarts.graphic.LinearGradient(
                        1,
                        1,
                        1,
                        0, //(上-下 渐变)
                        [
                          { offset: 0, color: '#5AD8A6' },
                          { offset: 1, color: '#9AFEA5' }
                        ]
                      )
                    }
                  }
                ],
                labelLine: {
                  show: true
                },
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#001D40',
                  borderWidth: 2
                  // borderWidth: 10, //设置边框粗细
                  // borderColor: 'rgb(9,37,71, 0.5)' //边框颜色
                },
                label: {
                  formatter: '{b}\n\n{c}%',
                  color: '#B5C5D4'
                }
              }
            ]
          }
        } else {
          this.achievementMessage = {}
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
